<template>
  <footer class="footer">
    <span class="todo-count">剩余<strong>数量值{{count}}</strong></span>
    <ul class="filters">
      <li>
        <a :class="{selected:isSel=='all'}" href="javascript:;" @click="changeSate('all')">全部</a>
      </li>
      <li>
        <a :class="{selected:isSel=='no'}" href="javascript:;" @click="changeSate('no')">未完成</a>
      </li>
      <li>
        <a :class="{selected:isSel=='yes'}" href="javascript:;" @click="changeSate('yes')">已完成</a>
      </li>
    </ul>
    <button class="clear-completed" @click="clearDone">清除已完成</button>
  </footer>
</template>

<script>
import {mapMutations,mapState} from "vuex"
export default {
  data(){
    return {
      isSel:"all"
    }
  },
  computed:{
    ...mapState("todoMain",["todiList"]),
    count(){
      const list= this.$store.state.todoMain.todiList.filter((item)=>{
        return  item.idDone==false
      })
      // console.log(7777777777,this.$store.getters.showList)
      // const list=this.$store.getters.showList.filters((item)=>{
      //   return  !item.idDone
      // })
      return list.length
    }
  },
  methods:{
    ...mapMutations("todoMain",["clearDone"]),
    changeSate(val){
      console.log("val",val)
      this.isSel=val
      this.$store.commit("todoFooter/setIsSel",val)
    }
  }
}
</script>
